<template>
	<view class="verified">
		<view class="input-group" v-if="userInfo.card_status == 0">
			
			<view class="input-row">
				<view class="icon iconfont icon-weibiaoti2fuzhi12"></view>
				<input type="text" name="true_name" v-model="true_name" class="input-clear" placeholder="请填写真实姓名" />
			</view>

			<view class="input-row">
				<view class="icon iconfont icon-yanzhengma"></view>
				<input type="text" name="idcard" v-model="idcard" class="input-clear" maxlength="18" placeholder="请填写身份证号码"/>
			</view>

			<view class="imgs text-md">
				<view class="title text-danger">上传照片</view>
				<view class="img-box  text-center">
					<view class="img-item" v-for="(item, index) in imgs" @tap="uploadImg(index)" :key="index">
						<view class="img">
							<image :src="item.img_url" class="img-responsive"></image>
						</view>
						<view class="img-name">{{item.name}}</view>
					</view>
					
				</view>
			</view>
			<view class="fixed-bottom-btn" @tap="submitApply()">提交认证</view>

		</view>

		<view class="verified-status" v-else>
			<view class="title text-center text-danger" v-if="userInfo.card_status == 1">实名认证审核中</view>
			<view class="title text-center text-danger" v-else-if="userInfo.card_status == 2">实名认证已通过</view>
			<view class="title text-center text-danger" v-else-if="userInfo.card_status == 3">实名认证审核失败</view>
			<view class="info name"><view class="text-gray">真实姓名</view> {{userInfo.true_name}}</view>
			<view class="info card-no"><view class="text-gray">身份证号</view> {{userInfo.card_no}}</view>
			<view class="info remark" v-if="userInfo.verified_remark && userInfo.card_status == 3"><view class="text-gray">失败原因</view> {{userInfo.verified_remark}}</view>

			<view class="btn" v-if="userInfo.card_status == 3">
				<view class="radius-btn" @tap="userInfo.card_status = 0">重新申请</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				userInfo: '',
				true_name: '',
				idcard: '',
			    imgs: [
			      {
			        name: '上传身份证正面照片',
			        img_url: '/static/front_face.png',
			        upload: false,
			      },
			      {
			        name: '上传身份证反面照片',
			        img_url: '/static/back_face.png',
			        upload: false,
			      },
			      {
			        name: '上传手持身份证正面照片',
			        img_url: '/static/handheld.png',
			        upload: false,
			      },
			    ],
			    showdiv: false,
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			//获取用户信息
				getUserInfo: function(){
					
					var url =  'user/index';
					var that = this;
					var params = {
						url: 'user/index',
						sCallback: function(res) {
							if(res.code == 200) {
								that.userInfo = res.data.userInfo;
							} else {
								Request.alert(res.msg);
							}
						}
					}
					Request.send(params);
				},
		  		//上传图片
				uploadImg: function(index) {
					var that = this;
					uni.chooseImage({
						count:1,
						sizeType: ['compressed'],
						success(obj) {
							console.log(obj);
							Request.uploadImg({
								data: obj.tempFilePaths[0],
								sCallback: function(res) {
									
									that.imgs[index]['img_url'] = res.data.url;
									that.imgs[index]['upload'] = true;
									
								}
							})
						},
						fail(e) {
							console.log('err');
							console.log(e);
							Request.alert('图片选择出错');
						}
					})
				},
			    //提交认证
				submitApply: function(e){

				    if(!this.true_name){
				      Request.alert('请填写真实姓名');return;
				    }


				    if(!this.idcard){
				      Request.alert('请填写身份证号码');return;
				    }

				    var preg = /(^\d{15}$)|(^\d{17}(x|X|\d)$)/;
				    if(!preg.test(this.idcard)){
				      Request.alert('身份证号码格式不正确');return;
				    }

				    var imgs = this.imgs;
				    var images = [];
				    imgs.forEach(function(item){
				      if(item.upload == false){
				        Request.alert('请'+item.name);return;
				      } else {
				        images.push(item.img_url);
				      }
				    });

				    console.log(images);
				    var that = this;
				    if(images.length == 3){
				      var images = images.join(',');
				      this.images = images;
					  var postData = {
				      	true_name: that.true_name,
				      	idcard: that.idcard,
				      	images: images,
				      }
					  
					  Request.send({
						  url: 'user/authentication',
						  data: postData,
						  sCallback: function(res) {
							  if(res.code == 200) {
								  uni.showToast({
								  	title: res.msg,
									success() {
										uni.navigateBack({
								
										})
									}
								  })
							  }
						  }
					  });
				      
				    }

				}
		}
	}
</script>

<style>
	.verified{
		font-size: 28upx;
		margin-bottom: 90upx;
	}
	
	.verified .verified-status .title{
		text-align: center;
		font-size: 40upx;
		margin: 20upx 0;
	}
	
	.verified-status .info{
		display: flex;
		width: 100%;
		background: #fff;
		padding: 20upx 40upx;
		border-top: 1upx solid #eee;
	}
	
	.verified-status .info view{
		margin-right: 20upx;
	}
	
	.verified-status .remark{
		color: #E60012;
	}

	.radius-btn{
		margin-top: 80upx;
	}
	
	.input-group{
		background: #fff;
	}
	
	.input-group .title{
		padding: 20upx 40upx;
	}
	
	.input-row{
		display: flex;
		height: 80upx;
		padding: 0 40upx;
		align-items: center;
		border-bottom: 1upx solid #eee;
	}
	
	.input-row .icon{
		margin-right: 10upx;
	}
	
	.input-row input{
		flex: 1;
	}
	
	.input-group image{
		width: 550upx;
		height: 300upx;
	}
	
	.img-item{
		text-align: center;
		color: #999;
		
		border-bottom: 1upx solid #eee;
		padding: 40upx 0;
	}
</style>
